<template>
    <div class="user-setting">
        <basic-container>

            <!--修改支付密码弹框(通过原支付密码修改支付密码）-->
            <el-dialog
                    :title="titleInfo"
                    :visible.sync="dialogChangePayPwd"
                    size="70%"
                    :close-on-click-modal="false"
                    :show-close="false"
                    @open = "open">

                <el-form :model="objChangePwd" :rules="rules" ref="changePwd" label-width="170px" class="demo-ruleForm">
                    <el-form-item :label="pleaseInputOriginalPwd" prop="pleaseInputOriginalPwd" style="width: 70%;display: inline-block;">
                        <el-input v-model="objChangePwd.pleaseInputOriginalPwd" @input="change($event)" :placeholder="pleaseInputOriginalPwd" show-password></el-input>
                    </el-form-item>

                    <el-form-item :label="pleaseInputNewPwd" prop="pleaseInputNewPwd" style="width: 70%;display: inline-block;">
                        <div class="sub-title">密码由6-20位数字、字母、下划线组成</div>
                        <el-input v-model="objChangePwd.pleaseInputNewPwd" @input="change($event)" :placeholder="pleaseInputNewPwd" show-password></el-input>
                    </el-form-item>

                    <el-form-item :label="pleaseInputAgainNewPwd" prop="pleaseInputAgainNewPwd" style="width: 70%;display: inline-block;">
                        <div class="sub-title">密码由6-20位数字、字母、下划线组成</div>
                        <el-input v-model="objChangePwd.pleaseInputAgainNewPwd" @input="change($event)" :placeholder="pleaseInputAgainNewPwd" show-password></el-input>
                    </el-form-item>
                </el-form>

                <div style="margin: 50px auto;">
                    <div style="width:200px;margin: 0px auto;">
                        <el-button type="primary" size="mini" @click="sureChangePwd" :loading="loadBtn">保 存</el-button>
                        <el-button size="mini" @click="cancelChangePwd">取 消</el-button>
                    </div>
                </div>

            </el-dialog>

        </basic-container>
    </div>
</template>

<script>
    import {
        changePwdByOriginal,
        changeUserPwdByOriginal,
        changeAccountPwdByOriginal
    } from "@/api/user";
    import ElSlPanel from "element-ui/packages/color-picker/src/components/sv-panel";
    import {
        isTestPwd,testPassWord
    } from '@/util/util'
	import {
        removeStore
    } from '@/util/store'
	
    export default {
        props: ["whichWay","useType"],
        components: {ElSlPanel},
        data() {
            return {
                loadBtn:false,                           //通过手机号修改支付/账户等密码的提交状态
                objChangePwd: {},                         //声明一个对象用于修改支付密码双向绑定的数据
                dialogChangePayPwd: false,               //修改支付密码/密码的弹框
                pleaseInputOriginalPwd:'请输入原密码',    //请输入原密码
                pleaseInputNewPwd:'请输入新密码',         //请输入新密码
                pleaseInputAgainNewPwd:"请再次输入密码",  //请再次输入密码
                titleInfo:'通过原密码修改密码',       //弹框title
                isChangePwd:false,                       //是否是修改密码
                isChangePayPwd:false,                    //是否是修改支付密码
                rules: {
                    pleaseInputOriginalPwd: [
                        {required: true, message: '请输入原密码', trigger: 'blur'},
                    ],
                    pleaseInputNewPwd: [{
                        required: true,
                        validator: testPassWord,
                    }],
                    pleaseInputAgainNewPwd: [{
                        required: true,
                        validator: testPassWord,
                    }]
                },
            }
        },

        watch: {
            useType: {
                handler(newValue, oldValue) {
                    this.useType = newValue;
                },
            },
            whichWay: {
                handler(newValue, oldValue) {
                    this.whichWay = newValue;
                },
            }
        },


        methods: {
			change(){
				this.$forceUpdate()
			},
            open(){
                //"whichWay","useType"
                if(this.whichWay == "changPwdByOriginal"){
                    //修改密码
                    this.isChangePwd = true;
                    this.isChangePayPwd = false;
                    this.pleaseInputOriginalPwd = "请输入原密码";
                    this.pleaseInputNewPwd = "请输入新密码";
                    this.pleaseInputAgainNewPwd ="请再次输入新密码";
                    this.titleInfo = "通过原密码修改密码";
                }
                else if(this.whichWay == "changPayPwdByOriginal"){
                    //修改支付密码
                    this.isChangePayPwd = true;
                    this.isChangePwd = false;
                    this.pleaseInputOriginalPwd = "请输入原支付密码";
                    this.pleaseInputNewPwd = "请输入新支付密码";
                    this.pleaseInputAgainNewPwd ="请再次输入新支付密码";
                    this.titleInfo = "通过原支付密码修改支付密码";
                }

                if(this.objChangePwd.pleaseInputOriginalPwd){
                    this.objChangePwd.pleaseInputOriginalPwd ="";
                }
                if(this.objChangePwd.pleaseInputNewPwd){
                    this.objChangePwd.pleaseInputNewPwd ="";
                }
                if(this.objChangePwd.pleaseInputAgainNewPwd){
                    this.objChangePwd.pleaseInputAgainNewPwd ="";
                }

                this.dialogChangePayPwd = true;
            },
            //确定修改支付密码
            sureChangePwd() {
                this.loadBtn = true;
                if(this.objChangePwd.pleaseInputAgainNewPwd && this.objChangePwd.pleaseInputNewPwd == this.objChangePwd.pleaseInputOriginalPwd) {
                    this.$message({
                        message: '原密码不可与新密码相同',
                        type: 'error'
                    });
                    this.loadBtn = false;
                    return;
                }
                if (this.objChangePwd.pleaseInputAgainNewPwd&&this.objChangePwd.pleaseInputNewPwd == this.objChangePwd.pleaseInputAgainNewPwd) {
                    if(this.isChangePwd){
                        //通过原密码修改密码
                        changeAccountPwdByOriginal(this.objChangePwd.pleaseInputOriginalPwd, this.objChangePwd.pleaseInputNewPwd).then(res => {
                            this.loadBtn = false;
                            if (res.data.code == 200) {
                                this.dialogChangePayPwd = false;
                                this.$store.dispatch("LogOut");//退出登录
                            }else{
								this.$message({
									message: res.data.message,
									type: 'error'
								});
								return;
							}
                        });
                    }
                    else if(this.isChangePayPwd){
                        if(this.useType == "change_pay_pwd"){
                            //通过原支付密码修改支付密码(专门给卖家用户类型为店铺类型用户用的)
                            changePwdByOriginal(this.objChangePwd.pleaseInputOriginalPwd, this.objChangePwd.pleaseInputNewPwd).then(res => {
                                this.loadBtn = false;
                                if (res.data.code == 200) {
									removeStore({name:'isNeedModifyPassword'})
                                    this.loadBtn = false;
                                    this.dialogChangePayPwd = false;
                                    this.$message({
                                        type: 'success',
                                        message: '操作成功!'
                                    })
                                }else{
									this.$message({
										message: res.data.message,
										type: 'error'
									});
									return;
								}
                            });
                        }
                        else if(this.useType == "change_user_pay_pwd"){
                            //通过原支付密码修改支付密码(专门给卖家用户类型为用户类型用户用的)
                            changeUserPwdByOriginal(this.objChangePwd.pleaseInputOriginalPwd, this.objChangePwd.pleaseInputNewPwd).then(res => {
                                this.loadBtn = false;
                                if (res.data.code == 200) {
									removeStore({name:'isNeedModifyPassword'})
                                    this.loadBtn = false;
                                    this.dialogChangePayPwd = false;
                                    this.$message({
                                        type: 'success',
                                        message: '操作成功!'
                                    })
                                }else{
									this.$message({
										message: res.data.message,
										type: 'error'
									});
									return;
								}
                            });
                        }

                    }
                }
                else {
					if(this.objChangePwd.pleaseInputAgainNewPwd){
						this.$message({
						    type: "error",
						    message: "两次新输入的密码不一致"
						});
					}else{
						this.$message({
						    type: "error",
						    message: "请输入密码"
						});
					}
					this.loadBtn = false;
                }
            },

            //取消修改支付密码
            cancelChangePwd() {
                this.$nextTick(()=>{
                    this.$refs["changePwd"].resetFields();
                })
                this.dialogChangePayPwd = false;
            },
        }
    }
</script>

<style lang="scss">
    .user-setting {
        &__main {
            padding: 8px 40px;
        }
        &__item {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 12px 0;
            border-bottom: 1px solid #eee;
        }
        &__title {
            font-size: 20px;
            color: rgba(0, 0, 0, 0.85);
            line-height: 28px;
            font-weight: 500;
            margin-bottom: 12px;
        }
        &__meta {
            flex: 1;
            .title {
                margin: 6px 0;
                font-weight: 700;
                font-size: 14px;
            }
            .subtitle {
                margin: 8px 0;
                font-size: 14px;
                color: #555;
            }
        }
    }
</style>
